const gulp = require('gulp'),
  htmlmin = require('gulp-htmlmin'),
  uglify = require('gulp-uglify'),
  babel = require('gulp-babel'),
  connect = require('gulp-connect'),
  sass = require('gulp-sass'),
  cleanCss = require('gulp-clean-css')

// task制定任务，第一个参数是任务名，第二个参数是函数，函数里就是这个任务要执行的操作
// gulp.task('default', () => {
//   console.log('default gulp task')
// })

// 制定html任务：压缩html文件
gulp.task('html', () => {
  gulp.src('src/**/*.html')
    .pipe(htmlmin({
      removeComments: true, //清除HTML注释
      collapseWhitespace: true, //压缩HTML
      collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input checked />
      removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> ==> <input />
      removeScriptTypeAttributes: false, //删除<script>的type="text/javascript"
      removeStyleLinkTypeAttributes: true, //删除<style>和<link>的type="text/css"
      minifyJS: true, //压缩页面JS
      minifyCSS: true //压缩页面CSS
    }))
    .pipe(gulp.dest('dist'))
    .pipe(connect.reload())
})

// js任务： 压缩js
gulp.task('js', () => {
  gulp.src('src/js/**/*.js')
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
    .pipe(connect.reload())
})

// css任务： sass编译称css，压缩
gulp.task('css', () => {
  gulp.src('src/css/**/*.scss')
    .pipe(sass())
    .pipe(cleanCss())
    .pipe(gulp.dest('dist/css'))
})

// libs任务： 文件的复制
gulp.task('libs', () => {
  gulp.src('src/libs/**/*')
    .pipe(gulp.dest('dist/libs'))
})

// img任务： 文件的复制
gulp.task('img', () => {
  gulp.src('src/images/**/*')
    .pipe(gulp.dest('dist/images'))
})

// server任务： 运行一个服务器
gulp.task('server', () => {
  connect.server({
    root: 'dist',
    livereload: true,
    port: 1910
  })
})

// watch任务：监听文件的修改，自动重启对应任务
gulp.task('watch', () => {
  gulp.watch('src/**/*.html', ['html'])
  gulp.watch('src/js/**/*.js', ['js'])
  gulp.watch('src/css/**/*.scss', ['css'])
})

gulp.task('default', ['html', 'css', 'js', 'img', 'libs', 'server', 'watch'])